<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>Amaze UI Examples</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">


    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <link rel="stylesheet" href="../assets/css/custom.css">

</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
        href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<!-- 页面内容 开发时删除 -->
<header class="am-topbar admin-header am-topbar-inverse">
    <div class="am-topbar-brand">
        <strong>Amaze UI</strong> <small>后台管理模板</small>
    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
                    <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
            <li><a href="javascript:;" id="admin-fullscreen"><span class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar">
        <ul id="menu" class="am-list admin-sidebar-list">
            <li><a href="javascript:void(0);"><span class="am-icon-home"></span> 系统管理</a></li>
           <!-- <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"> 基础信息</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                    <li><a href="javascript:void(0);">用户管理</a></li>
                    <li><a href="javascript:void(0);">角色管理</a></li>
                    <li><a href="javascript:void(0);">商品管理</a></li>
                </ul>
            </li>
            <li>
                <a class="am-cf" data-am-collapse="{target: '#collapse-nav-order'}"> 订单管理</a>
                <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav-order">
                    <li><a href="javascript:void(0);">订单评价</a></li>
                    <li><a href="javascript:void(0);">订单撤消</a></li>
                </ul>
            </li>-->
        </ul>

    </div>
    <!-- sidebar end -->
    <div id="main-content" class="admin-content" style="padding:5px 2px;">
    <!--<iframe id="mainFrame" src="main.html" style="width: 100%"></iframe>-->
    </div>
</div>

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="./common.js"></script>

<script>
    $(function(){
        initMenu();
        openPage("main.html");

    })
    function initMenu(){
        doAjax("data.js",null, function(data){
            var menus = data.menu;
            for(var i = 0; i < menus.length; i++){
                if(menus[i].parent == null || menus[i].parent.length == 0){
                    $("#menu").append('<li class=""><a class="am-cf c-active" href="javascript:void(0);" p="true" subId="'+menus[i].id+'"><span class="am-icon-minus-square"></span> '+menus[i].name+'</a></li>');
                    $("#menu").append('<ul class="am-list am-collapse admin-sidebar-sub am-in" id="sub_'+menus[i].id+'"></ul>');
                }else{
                    $("#sub_"+menus[i].parent).append('<li><a href="javascript:void(0);" url="'+menus[i].url+'" onclick="onMenu(this)">'+menus[i].name+'</a></li>');
                }
            }
            $("a[p='true']").bind({click: function(){
                var a = $(this);
                var $collapse = $("#sub_"+a.attr("subId"));
                $collapse.collapse('toggle');
                if(a.find("span").hasClass("am-icon-minus-square")){
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-plus-square");
                }else{
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-minus-square");
                }

               /* $collapse.on('open.collapse.amui', function() {
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-minus");
                });

                $collapse.on('close.collapse.amui', function() {
                    a.find("span").removeClass();
                    a.find("span").addClass("am-icon-plus");
                })*/
            }});
        });
    }
    function onMenu(item){
        openPage($(item).attr("url"));
    }
    function openPage(url){
        doAjax(url, null, function(data){
            $("#main-content").empty();
            $("#main-content").append(data);
        },"html");
    }
    </script>
</body>
</html>
